<template>
  <el-input v-model="value">
    <template #prepend>
      <el-select style="width: 100px" v-model="field">
        <el-option label="用户名" value="username" />
        <el-option label="手机" value="phone" />
        <el-option label="邮箱" value="email" />
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search" @click="emits('search')" />
    </template>
  </el-input>
</template>
<script setup>
import { defineEmits, defineProps, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';

const props = defineProps(['searchField', 'searchValue']);
const emits = defineEmits(['update:searchField', 'update:searchValue', 'search']);

const value = computed({
  get() {
    return props.searchValue;
  },
  set(v) {
    emits('update:searchValue', v);
  },
});
const field = computed({
  get() {
    return props.searchField;
  },
  set(v) {
    emits('update:searchField', v);
  },
});
</script>
